<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter(); // 获取 router 实例
import {
  unit,
  manager,
  department,
  action
} from "@/api/xxgk";

defineOptions({
  name: "Info"
});
const active = ref(0);

// 单位概况
const unit_page = ref(1); // 页码
const unit_limit = ref(10); // 每页条数
const unit_list = ref([]); // 存储列表数据
const unit_loading = ref(false); // 加载状态
const unit_finished = ref(false);
const unit_refreshing = ref(false);
const unit_onLoad = async () => {
  if (unit_refreshing.value) {
    unit_page.value = 1
    unit_list.value = [];
    unit_refreshing.value = false;
  }
  unit_loading.value = true;
  const response = await unit({ page: unit_page.value, limit: unit_limit.value });
  console.log(response);
  if (response.code == 1) {
    unit_page.value++
    unit_list.value.push(...response.data.rows);
    unit_loading.value = false;
    if (unit_list.value.length >= response.data.total) {
      unit_finished.value = true;
    }
    console.log('unit_list', unit_list);
  } else {
    unit_finished.value = true;
  }
};
const unit_onRefresh = () => {
  // 清空列表数据
  unit_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  unit_loading.value = true;
  unit_onLoad();
};

// 获取领导分工列表 /api/xxgk/manager
const manager_page = ref(1); // 页码
const manager_limit = ref(10); // 每页条数
const manager_list = ref([]); // 存储列表数据
const manager_loading = ref(false); // 加载状态
const manager_finished = ref(false);
const manager_refreshing = ref(false);
const manager_onLoad = async () => {
  if (manager_refreshing.value) {
    manager_page.value = 1
    manager_list.value = [];
    manager_refreshing.value = false;
  }
  manager_loading.value = true;
  const response = await manager({ page: manager_page.value, limit: manager_limit.value });
  console.log(response);
  if (response.code == 1) {
    manager_page.value++
    manager_list.value.push(...response.data.rows);
    manager_loading.value = false;
    if (manager_list.value.length >= response.data.total) {
      manager_finished.value = true;
    }
    console.log('manager_list', manager_list);
  } else {
    manager_finished.value = true;
  }
};
const manager_onRefresh = () => {
  // 清空列表数据
  manager_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  manager_loading.value = true;
  manager_onLoad();
};

// 获取科室职能列表 /api/xxgk/department
const department_page = ref(1); // 页码
const department_limit = ref(10); // 每页条数
const department_list = ref([]); // 存储列表数据
const department_loading = ref(false); // 加载状态
const department_finished = ref(false);
const department_refreshing = ref(false);
const department_onLoad = async () => {
  if (department_refreshing.value) {
    department_page.value = 1
    department_list.value = [];
    department_refreshing.value = false;
  }
  department_loading.value = true;
  const response = await department({ page: department_page.value, limit: department_limit.value });
  console.log(response);
  if (response.code == 1) {
    department_page.value++
    department_list.value.push(...response.data.rows);
    department_loading.value = false;
    if (department_list.value.length >= response.data.total) {
      department_finished.value = true;
    }
    console.log('department_list', department_list);
  } else {
    department_finished.value = true;
  }
};
const department_onRefresh = () => {
  // 清空列表数据
  department_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  department_loading.value = true;
  department_onLoad();
};


// 获取攻坚行动列表 /api/xxgk/action
const action_page = ref(1); // 页码
const action_limit = ref(10); // 每页条数
const action_list = ref([]); // 存储列表数据
const action_loading = ref(false); // 加载状态
const action_finished = ref(false);
const action_refreshing = ref(false);
const action_onLoad = async () => {
  if (action_refreshing.value) {
    action_page.value = 1
    action_list.value = [];
    action_refreshing.value = false;
  }
  action_loading.value = true;
  const response = await action({ page: action_page.value, limit: action_limit.value });
  console.log(response);
  if (response.code == 1) {
    action_page.value++
    action_list.value.push(...response.data.rows);
    action_loading.value = false;
    if (action_list.value.length >= response.data.total) {
      action_finished.value = true;
    }
    console.log('action_list', action_list);
  } else {
    action_finished.value = true;
  }
};
const action_onRefresh = () => {
  // 清空列表数据
  action_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  action_loading.value = true;
  action_onLoad();
};


// 组件挂载时调用多个方法
onMounted(async () => {
});
// 跳转详情页
const goToDetail = async (id, type) => {
  router.push(`/info-detail/${id}/${type}`); // 路由跳转
}
</script>
<template>
  <div>
    <div style="">
      <!-- <div style="
      position: absolute;
      margin-top: 124px;
      margin-left: 24px;
      color: white;
      font-size: 24px;
      font-weight: bold;
    ">信息公开</div> -->
      <img style="
      position: absolute;
      margin-top: 140px;
      margin-left: 24px;
      width: 115px;" alt="" src="~@/assets/信息公开@2x.png" />
      <img class="block w-[1920px] h-[220px] mx-auto mb-[3px] pt-[0px]"
        style="border-radius: 0 0 12px 12px; /* 调整圆角大小 */" alt="" src="~@/assets/xxgk.jpg" />
    </div>
    <van-cell-group inset style="margin-top: -48px;">
      <van-tabs v-model:active="active">
        <van-tab title="单位职能">
          <van-pull-refresh v-model="unit_refreshing" @refresh="unit_onRefresh">
            <van-list v-model:loading="unit_loading" :finished="unit_finished" finished-text="没有更多了"
              @load="unit_onLoad">
              <van-cell v-for="(item, idx) in unit_list" :key="idx" :title="item.name" :label='item.intro'
                @click="goToDetail(item.id, 'unit')" class=" custom-cell" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <!-- <van-tab title="领导分工">
          <van-pull-refresh v-model="manager_refreshing" @refresh="manager_onRefresh">
            <van-list
              v-model:loading="manager_loading"
              :finished="manager_finished"
              finished-text="没有更多了"
              @load="manager_onLoad"
            >
              <van-cell v-for="(item, idx) in manager_list" :key="idx" :title="item.name" :label='item.intro'
                @click="goToDetail(item.id, 'manager')" class=" custom-cell" />
            </van-list>
          </van-pull-refresh>
        </van-tab> -->
        <van-tab title="科室职能">
          <van-pull-refresh v-model="department_refreshing" @refresh="department_onRefresh">
            <van-list v-model:loading="department_loading" :finished="department_finished" finished-text="没有更多了"
              @load="department_onLoad">
              <van-cell v-for="(item, idx) in department_list" :key="idx" :title="item.name" :label='item.intro'
                @click="goToDetail(item.id, 'department')" class=" custom-cell" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="攻坚行动">
          <van-pull-refresh v-model="action_refreshing" @refresh="action_onRefresh">
            <van-list v-model:loading="action_loading" :finished="action_finished" finished-text="没有更多了"
              @load="action_onLoad">
              <van-cell v-for="(item, idx) in action_list" :key="idx" :title="item.title" :label='item.intro'
                @click="goToDetail(item.id, 'action')" class=" custom-cell" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </van-cell-group>



  </div>
</template>


<style scoped>
/* 覆盖 title 的宽度 */
::v-deep .custom-cell .van-cell__title,
.custom-cell .van-cell__value {
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  text-overflow: ellipsis;
  /* 超出用省略号表示 */
}
</style>
